<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*表格样式*/
        table {
            width: 90%;
            background: #ccc;
            margin: 10px auto;
            border-collapse: collapse;/*border-collapse:collapse合并内外边距(去除表格单元格默认的2个像素内外边距*/
        }
        thead,th,td {
            height: 25px;
            line-height: 25px;
            text-align: left;
            border: 1px solid #ccc;
        }
        th {
            background: #eee;
            font-weight: normal;
        }
        tbody,tr {
            background: #fff;
        }
        tr:hover {
            background: #cc0;
        }
    </style>
</head>
<body>
    <h1>HDFS文件上传</h1>
    <form id="form1" enctype="multipart/form-data" method="post" action="/file/uploadToHdfs">
        <div class="row">
            <h1><label>Select a File to Upload</label></h1><br>
            <h1><input type="file" name="file" id="file" value="" placeholder="请选择"></h1>
        </div>
        <div class="row"  style="margin-top: 50px;">
            <input type="button" id="uploadButton" value="上传文件" οnclick="postData();" style="width:100px;height:100px;">
        </div>
        <div id="progressNumber"></div>
    </form>
    <p id="uploadMessage"></p>
    <br/><br/><br/><br/>
    <button name="btn" value="查看目录">查看目录</button>
    <br/>
    <table border="1">
        <thead>
            <th>
                <td>路径</td>
            </th>
        </thead>
        <tbody id="tb">

        </tbody>
    </table>

</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
    $(function(){
        var path = "/";
        $("button").click(function(){
            $.post("/file/listDir",{path:path},function(data,status){
                data.forEach(item => {
                    console.log(item);
                    $("#tb").append("<tr>\n" +
                                        "<td>"+item+"</td>\n" +
                                    "</tr>")
                })

            });
        });

        $("#uploadButton").click(function () {
            var fileInput = $("#file")[0].files[0];
            console.info(fileInput['name']);
            if(fileInput['name'] === ""){
                $("#uploadMessage").innerText = "请选择文件！！";
            }else{
                var formData = new FormData()
                formData.append("file", $("#file")[0].files[0]);
                if (formData == {}) {
                    $("#uploadMessage").innerText = "请选择文件！！";
                }
                $.ajax({
                    url: '/file/uploadToHdfs',
                    type: 'post',
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function (res) {
                        if (res["success"] == "true") {
                            // alert('成功');
                            $("#uploadMessage").innerText = res['data'];
                        } else if (res["success"] == "false") {
                            // alert('失败');
                            $("#uploadMessage").innerText = res['data'];
                        } else {
                            console.log(res);
                        }
                    }
                });

            }

        })
    });
</script>
</html>